<template>
	<view class="recruitment">

		<view class="from">
			<p>欢迎加入我们！</p>
			<view>
				<p @click='shows("show2")'>选择类型:<input type="text" disabled v-model="formData.cateName"></p>
				<p @click='showCityPicker'>意向合作城市:<input disabled type="text" v-model="formData.address"></p>
				<p @click='shows("show1")'>选择店铺:<input type="text" disabled v-model="formData.shopName"></p>
				<p><span>姓名:</span><input type="text" v-model="formData.username"></p>
				<p @click='shows("show")'><span>性别:</span><input type="text" disabled v-model="formData.gender"></p>
				<p><span>年龄:</span><input type="number" v-model="formData.age"></p>
				<p><span>手机号:</span><input type="number" v-model="formData.mobile" maxlength="11"></p>
				<!-- <p><span>验证码:</span><input type="text" v-model="formData.code"><button>获取验证码</button></p> -->
				<!-- <p></p> -->
			</view>
			<p>请上传本人近期照片~</p>
			<view>
				<view class="upload">
					<view v-if="formData.avatar">
						<image @click="uploadImage" :src="$imgUrl + formData.avatar"></image>
					</view>
					<view class="view" @click="uploadImage" v-if="!formData.avatar">
						<image src="../../../../static/technician/71.png"></image>上传图片
					</view>
				</view>
			</view>
		</view>
		<button @click="submit">提交</button>
		<!-- 选择性别 -->
		<u-picker @cancel='cancel("show")' @confirm='confirm' :show="show" :columns="columns" keyName="sex"></u-picker>
		<!-- 选择店铺 -->
		<u-picker @cancel='cancel("show1")' @confirm='confirm1' :show="show1" :columns="shopList"
			keyName="shop_name"></u-picker>
		<!-- 选择类型 -->
		<u-picker @cancel='cancel("show2")' @confirm='confirm2' :show="show2" :columns="cateList"
			keyName="title"></u-picker>
		<!-- 选择意向城市 -->
		<cityPicker :formData="formData" ref="cityPicker"></cityPicker>
	</view>
</template>

<script>
	import cityCode from '@/static/json/new_file.json'
	import cityPicker from '@/components/city_picker/city_picker.vue'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				addr: '',
				addrColumnsData: [], // 设置每一列的数据
				showqq: true,
				columns1: [],
				columnData: [],
				columnData1: [],
				show: false,
				show1: false,
				show2: false,
				show3: false,
				columns: [
					[{
						sex: '男',
						indnx: 1
					}, {
						sex: '女',
						indnx: 0
					}]
				],
				cityList: [],
				shopList: [],
				cateList: [],
				formData: {
					username: "",
					gender: "",
					age: "",
					mobile: "",
					partner_id: "",
					category_id: "",
					avatar: "",
					province_id:0,
					city_id:0,
					area_id:0,
					// 扩展字段
					id: 0,
					address: "",
					shopName: "",
					cateName: "",
				},
			};
		},
		methods: {
			shows(index) {
				this[index] = true;
			},
			showCityPicker() {
				this.$refs.cityPicker.handleShow();
			},
			cancel(index) {
				this[index] = false
			},
			// 性别
			confirm(res) {
				this.formData.gender = res.value[0].sex;
				this.show = false;
			},
			// 店铺
			confirm1(res) {
				this.formData.partner_id = res.value[0].id;
				this.formData.shopName = res.value[0].shop_name;
				this.show1 = false;
			},
			// 分类
			confirm2(res) {
				this.formData.category_id = res.value[0].id;
				this.formData.cateName = res.value[0].title;
				this.show2 = false;
			},
			uploadImage() {
				uni.showLoading();
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.img = res.tempFilePaths[0];
						let uniImg = that.img;
						uni.uploadFile({
							url: that.$baseUrl + '/image/upload',
							filePath: uniImg,
							name: 'image',
							header: {
								'token': uni.getStorageSync('userToken'),
								'token-type': 0 //0正常token验证1跳过验证
							},
							success: res => {
								let result = JSON.parse(res.data);
								that.formData.avatar = result.data;
							},
							complete:()=>{
								uni.hideLoading();
							}
						});
					}
				});
			},
			submit() {
				this.$httpRequest('/tech/saveTechInfo', this.formData).then(res => {
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
				});
			},
			getShopList() {
				this.$httpRequest('/tech/getOpenShopList').then(res => {
					this.shopList = [res.data];
				});
			},
		},
		onLoad() {
			this.getShopList();
			this.cateList = [JSON.parse(uni.getStorageSync('cid'))];
		}
	}
</script>

<style lang="less">
	.recruitment {
		color: #333;
		padding-bottom: 120rpx;
		box-sizing: border-box;

		&>.from {
			width: 690rpx;
			margin: 0 auto;

			&>p {
				font-size: 15px;
				margin: 32rpx 0 32rpx 20rpx;
			}

			&>view {
				width: 100%;
				background: #fff;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;

				&>.upload {
					display: flex;
					flex-wrap: wrap;

					&>view {
						width: 185rpx;
						height: 185rpx;
						border-radius: 5px;
						overflow: hidden;
						margin: 12rpx;

						&>image {
							width: 100%;
							height: 100%;
							image-rendering: -moz-crisp-edges;
							image-rendering: -o-crisp-edges;
							image-rendering: -webkit-optimize-contrast;
							image-rendering: crisp-edges;
							-ms-interpolation-mode: nearest-neighbor;
						}
					}

					&>.view {
						width: 185rpx;
						height: 185rpx;
						border-radius: 5px;
						border: 1px dashed #BCBCBC;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						font-size: 12px;
						color: #9E9E9E;
						margin: 12rpx;

						&>image {
							width: 40rpx;
							height: 36rpx;
							margin-bottom: 10rpx;
							image-rendering: -moz-crisp-edges;
							image-rendering: -o-crisp-edges;
							image-rendering: -webkit-optimize-contrast;
							image-rendering: crisp-edges;
							-ms-interpolation-mode: nearest-neighbor;
						}
					}
				}

				&>p {
					width: 100%;
					height: 76rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F0F0F0;
					font-size: 13px;
					color: #9E9E9E;

					&>button {
						width: 172rpx;
						height: 50rpx;
						font-size: 15px;
						background: #6AB650;
						color: #fff;
						line-height: 50rpx;
						padding: 0;
					}

					&>span {
						width: 100rpx;
					}

					&>input {
						flex: 1;
						height: 100%;
						font-size: 13px;
						padding-left: 20rpx;
					}
				}
			}
		}

		&>button {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			background: #5FC07B;
			font-size: 15px;
			position: fixed;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>